<template>
  <div class="header-container el-menu-demo">
    <el-menu :ellipsis="false" menu-trigger="click" popper-class="bg-#424d6a" :default-active="activeIndex"
      mode="horizontal" text-color="#fff" background-color="transparent" active-text-color="#ffd04b" router
      class="w-1200">
      <!-- Logo区域 -->
      <div class="logo">
        <!-- <img src="path/to/your-logo.png" alt="Logo" style="height: 40px; margin-right: 20px;"> -->
      </div>

      <!-- 导航菜单 -->
      <el-menu-item index="/Home" :route="{ path: '/Home' }">首页</el-menu-item>
      <el-menu-item index="/financial-products" :route="{ path: '/financial-products' }">金融超市</el-menu-item>
      <el-menu-item index="/financial-institution" :route="{ path: '/financial-institution' }">金融机构</el-menu-item>

      <el-menu-item index="/document/news" :route="{ path: '/document/news' }">最新动态</el-menu-item>
      <el-sub-menu class="!ml-auto" index="user-menu">
        <template #title>
          <el-avatar :size="30" :src="userStore.avatar" class="user-avatar"></el-avatar>
          <span class="user-name">{{ userStore.name }}</span>
        </template>
        <!-- <el-menu-item index="settings">账户设置</el-menu-item> -->
        <el-menu-item index="logout" @click="handleLogout">退出登录</el-menu-item>
      </el-sub-menu>
      <!-- 右侧用户区域 -->

    </el-menu>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import useUserStore from '@/stores/user'
const userStore = useUserStore()

// 路由实例
const router = useRouter()

// 当前激活的菜单项
const activeIndex = computed(() => router.currentRoute.value.path)



// 用户信息


// 登录对话框显示状态
const loginDialogVisible = ref(false)

// 登录表单数据
const loginForm = reactive({
  username: '',
  password: ''
})

// 打开登录对话框
const openLoginDialog = () => {
  loginDialogVisible.value = true
}

// 打开注册对话框（示例）
const openRegisterDialog = () => {
  ElMessage.info('注册功能暂未开放')
}

// 处理登录
const handleLogin = () => {
  if (loginForm.username && loginForm.password) {
    // 模拟登录成功
    loginDialogVisible.value = false
    ElMessage.success('登录成功！')
  } else {
    ElMessage.warning('请输入手机号和密码')
  }
}

// 处理退出登录
const handleLogout = () => {
  ElMessage.success('已退出登录')
  userStore.logOut()
  router.push({
    path: '/Home'
  })
}
</script>

<style scoped lang="scss">
:deep(.el-menu) {
  background: linear-gradient(135deg, #555E77, #424d6a) !important;
}



.header-container {

  background: linear-gradient(135deg, #555E77, #424d6a);
  /* background-color: #545c64; */
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.el-menu-demo {
  display: flex;
  align-items: center;
  justify-content: center;
  /* padding: 0 20px; */
}

.logo {
  display: flex;
  align-items: center;
  margin-right: 30px;
}

.flex-grow {
  flex-grow: 1;
}

.user-avatar {
  margin-right: 8px;
}

.user-name {
  margin-left: 5px;
  font-size: 14px;
}

.login-register {
  display: flex;
  align-items: center;
  color: white;
  padding: 0 20px;
}

.divider {
  margin: 0 10px;
  color: rgba(255, 255, 255, 0.5);
}

.el-button--text {
  color: #fff;
}

.el-button--text:hover {
  color: #ffd04b;
}
</style>
